<template>
  <div id="radarChart" ref="radarChart" class="radar-chart"></div>
</template>
<script>
import { radarOptions, resizeChart } from "@/assets/js/echartOptions.js";

export default {
  name: "radarChart",
  data() {
    return {
      radarChart: null,
      options: null,
    };
  },
  watch: {
    radarData: {
      handler(val) {
        if (val) {
          this.options.radarData = {...val};
          this.radarChart.setOption(radarOptions(this.options));
        }
      },
      deep: true,
    },
    // indicator: {
    //   handler(val) {
    //     if (val.length) {
    //       this.options.radarData = [...val];
    //       this.radarChart.setOption(radarOptions(this.options));
    //     }
    //   },
    //   deep: true,
    // },
  },
  props: {
    isLength: {
      type: Boolean,
      default: false,
    },
    legendLeft: {
      type: String,
      default: "left",
    },
    legendTop: {
      type: String,
      default: "top",
    },
    legendItemHeight: {
      type: Number,
      default: 10,
    },
    legendItemWidth: {
      type: Number,
      default: 10,
    },
    orient: {
      type: String,
      default: "horizontal",
    },
    selectedList: {
      type: Object,
      default: () => {},
    },
    legendColor: {
      type: String,
      default: "#fff",
    },
    legendSize: {
      type: Number,
      default: 12,
    },
    hasName: {
      type: Boolean,
      default: false,
    },
    radarData: {
      type: Object,
      default: () => {},
    },
    radius: {
      type: String,
      default: "70%",
    },
    center: {
      type: Array,
      default: () => ["40%", "60%"],
    },
    indicator: {
      type: Array,
      default: () => [],
    },
    echartTitle: {
      type: Object,
      default: () => {},
    },
    splitLine: {
      type: Object,
      default: () => {},
    },
    areaColor: {
      type: String,
    },
  },
  mounted() {
    this.radarChart = this.$echarts.init(this.$refs["radarChart"]);
    this.options = {
      isLength: this.isLength,
      legendLeft: this.legendLeft,
      legendTop: this.legendTop,
      legendItemHeight: this.legendItemHeight,
      legendItemWidth: this.legendItemWidth,
      orient: this.orient,
      selectedList: this.selectedList,
      legendColor: this.legendColor,
      legendSize: this.legendSize,
      hasName: this.hasName,
      radarData: this.radarData,
      radius: this.radius,
      center: this.center,
      indicator: this.indicator,
      echartTitle: this.echartTitle,
      splitLine: this.splitLine,
      areaColor: this.areaColor,
    };
    this.radarChart.setOption(radarOptions({ ...this.options }));
    resizeChart(this.radarChart);
  },
};
</script>
<style lang="less" scoped>
.radar-chart {
  height: 100%;
  width: 100%;
}
</style>
